<!--
 * @Author: thats-all-right-ha-ha 8280209+thats-all-right-ha-ha@user.noreply.gitee.com
 * @Date: 2024-04-17 20:30:43
 * @LastEditors: thats-all-right-ha-ha 8280209+thats-all-right-ha-ha@user.noreply.gitee.com
 * @LastEditTime: 2024-04-18 20:02:16
 * @FilePath: \vue-project\src\views\home\components\HomeEnergize.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<script setup>
import { ref } from 'vue'
import { getImg } from '@/utils';
import HomeButton from '@/views/home/components/HomeButton.vue'
const industry = ref(['金融行业', '互联网行业', '保险行业', '汽车行业', "传媒行业", "通信行业"])
const className = ref(['is-show'])
const IMG = ref(['title-Tencent.png', 'title-unicom.png', 'title-unionpay.png'])
</script>

<template>
    <div class="energize">
        <div class="energize-main">
            <div class="energize-main_title">
                <img src="@/assets/img/title-energize.png" alt="">
            </div>
            <div class="energize-main_link">
                <HomeButton v-for="item in industry" :key="item" :className="className" class="button">{{ item }}
                </HomeButton>
            </div>
            <div class="energize-main_detail">
                <el-carousel :interval="4000" type="card" height="454px">
                    <el-carousel-item v-for="item in IMG" :key="item">
                        <img :src="getImg(item)" alt="">
                        <p class="text">作为中国的银行卡联合组织，
                            中国银联处于我国银行卡产业的核心和枢纽地位，对
                            我国银行卡产业发展发挥着基础性作用，各银行通过银联跨
                            行交易清算系统。实现了系统间的互联互通，进而使银行卡得以跨银行、跨地区和跨境使用。
                        </p>
                    </el-carousel-item>
                </el-carousel>
            </div>

        </div>

    </div>
</template>



<style lang="scss" scoped>
.energize {
    background-color: #f8fafd;
    padding-bottom: 112px;
}

.energize-main {
    padding-top: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 1200px;
    margin: auto;

    .energize-main_link {
        width: 100%;
        display: flex;
        justify-content: space-around;
    }

    .energize-main_title {
        padding-bottom: 70px;
    }

    .energize-main_detail {
        width: 1060px;
        padding-top: 70px;

        .text {
            padding-top: 70px;
            color: #333333;
            text-indent: 2em;
            font-size: 14px;
        }


        .el-carousel__item {
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 86px 40px 138px;
            box-shadow: 0px -1px 21px 0px rgba(192, 192, 192, 0.35);
            background-color: #fff;
        }

        // .el-carousel__item:nth-child(2n) {}

        // .el-carousel__item:nth-child(2n + 1) {}


    }

}


.is-show {
    display: flex
}

.button {
    font-size: 18px;
    width: 180px;
    height: 50px;
    color: black;
    background-color: #fff;
    box-shadow: 0px -1px 21px 0px rgba(192, 192, 192, 0.35);
    border-radius: 25px;

    &:hover {
        background-color: #ff7200;
        color: white;
    }
}


// 轮播图样式</style>